<template>
  <div class="header_menu">
    <div class="left_title">
      <div class="title_zn" :title="titleZn">{{ titleZn }}</div>
      <div class="title_en">{{ titleEn }}</div>
    </div>
    <div class="center_menu">
      <div
        class="menu_item"
        v-for="(item, index) in menuList"
        :key="item.key"
        :class="{ active: nowIndex == index }"
        @click="menuClick(index)"
      >
        <router-link :to="item.linkPath"> {{ item.menuName }}</router-link>
      </div>
    </div>
    <div class="right_user">
      <div class="about" @click="showAboutModal">
        <img src="/static/images/header-menu/about.png" alt="img" />
        <span>关于</span>
      </div>
      <div class="user">
        <a-dropdown :trigger="['click']">
          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
            <img src="/static/images/header-menu/admin.png" alt="img" />
            {{ username }}&nbsp;&nbsp;&nbsp;<a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="changePassword"
              ><a-icon type="edit" /> 修改密码
            </a-menu-item>
            <a-menu-item key="2" @click="logout">
              <a-icon type="poweroff" />退出系统
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>

    <!-- 关于弹窗 -->
    <about-modal
      :visible="aboutVisibility"
      @handleAbout="handleAbout"
    ></about-modal>
  </div>
</template>

<script>
const menuList = [
  {
    key: "realtime-monitor",
    linkPath: "/realtime-monitor",
    menuName: "实时监测",
  },
  {
    key: "log-audit",
    linkPath: "/log-audit",
    menuName: "日志审计",
  },
  {
    key: "statistic-statement",
    linkPath: "/statistic-statement",
    menuName: "统计报表",
  },
  {
    key: "behavior-manage",
    linkPath: "/behavior-manage",
    menuName: "行为管理",
  },
  {
    key: "user-manage",
    linkPath: "/user-manage",
    menuName: "用户管理",
  },
  {
    key: "system-manage",
    linkPath: "/system-manage",
    menuName: "系统管理",
  },
];
import { AboutModal } from "./modal";
export default {
  components: {
    AboutModal,
  },
  data() {
    return {
      titleZn: "网络安全审计系统",
      titleEn: "Surfilter Network Security Audit System",
      menuList,
      nowIndex: 0,
      username: "admin",
      aboutVisibility: false,
    };
  },
  mounted() {
    // 刷新一级菜单选中逻辑
    let routeLink = "/" + location.hash.split("/")[1];
    for (let i = 0; i < this.menuList.length; i++) {
      if (this.menuList[i].linkPath == routeLink) {
        this.nowIndex = i;
        break;
      }
    }
  },
  methods: {
    // 改变选中状态
    menuClick(index) {
      this.nowIndex = index;
    },
    showAboutModal() {
      console.log(
        "%cheader-menu.vue line:103 123123",
        "color: #007acc;",
        123123
      );
      this.aboutVisibility = true;
    },
    handleAbout() {
      this.aboutVisibility = false;
    },
    changePassword() {
      this.$message.success("修改密码");
    },
    logout() {
      this.$message.loading("登录成功，正在进入...");
      setTimeout(() => {
        localStorage.removeItem("token");
        top.location.href = "./login.html";
      }, 1500);
    },
  },
};
</script>

<style lang="less" scoped>
.header_menu {
  display: flex;
  justify-content: space-between;
  height: 100%;
  .left_title {
    height: 100%;
    max-width: 400px;
    min-width: 300px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 8px;
    .title_zn {
      font-family: "txt-cn";
      height: 32px;
      line-height: 40px;
      text-shadow: 2px 2px 5px #26f2e1;

      font-size: 38px;
      color: #f3fcff;
    }
    .title_en {
      font-family: "txt-en";
      height: 24px;
      line-height: 24px;
      font-size: 12px;
      color: #f3fcff;
    }
  }
  .center_menu {
    height: 100%;
    flex: 1;
    padding-left: 20px;
    display: flex;
    padding-top: 19px;

    .menu_item {
      height: 40px;
      line-height: 40px;
      text-align: center;
      width: 115px;
      font-size: 16px;
      a {
        color: #a3c9cb !important;
        width: 100%;
        height: 100%;
        display: inline-block;
      }
      &:hover {
        font-weight: bold;
        a {
          color: #fff !important;
        }
      }
      &.active {
        font-weight: bold;
        a {
          color: #fff !important;
        }
        background-image: url("/static/images/header-menu/menu-active.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .right_user {
    height: 100%;
    width: 190px;
    display: flex;
    color: #fff;
    padding-top: 21px;
    img {
      height: 34px;
      width: 34px;
    }
    .about {
      height: 34px;
      line-height: 34px;
      display: flex;
      padding-right: 15px;
      transition: 0.5s all;
      &:hover {
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.188);
        border-radius: 5px;
      }

      span {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        height: 100%;
      }
    }
    .user {
      height: 34px;
      line-height: 34px;
      .ant-dropdown-link {
        color: #fff;
      }
    }
  }
}
</style>
